<template>
  <div class="home">
    <div class="main">
      <router-view />
    </div>
    <footer>
      <van-tabbar v-model="active" route>
        <van-tabbar-item icon="home-o"  to="/index">首页</van-tabbar-item>
        <van-tabbar-item icon="search"  to="/cate">分类</van-tabbar-item>
        <van-tabbar-item icon="friends-o"  to="/cart">购物车</van-tabbar-item>
        <van-tabbar-item icon="setting-o"  to="/my">我的</van-tabbar-item>
      </van-tabbar>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
    }
  },
};
</script>
<style lang="scss" scoped>
.home{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.main{
  width: 100%;
  flex: 1;
}
footer{
  width: 100%;
  height: 50px;
}
</style>
